<!--
 * @Author: windys
 * @Description: 目录
 * @Date: 2022-03-08 10:25:54
-->
<template>
  <div class="Catalogue_page">
    <van-collapse v-model="activeNames" accordion>
      <van-collapse-item
        :name="index"
        v-for="(item, index) in list"
        :key="index"
      >
        <template #title>
          <div><van-icon name="video-o" />第{{index+1}}节： {{ item.chapterName }}</div>
        </template>
        <div
          class="lesson"
          v-for="(el, idx) in item.videoRsps"
          :key="idx"
          @click="handleGetPlayUrl(item, el)"
        >
          <van-icon name="play-circle-o" />
          {{ el.videoTitleName }}
        </div>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script >
import { Notify } from "vant";
import { defineComponent, ref } from "vue";

export default defineComponent({
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  setup(props,{emit}) {
    const activeNames = ref([0]);

    const handleGetPlayUrl = (item,el) => {
        emit('handleGetPlayUrl',item.chapterId,el.mediaId)
        Notify({type:'success',message:`播放${el.videoTitleName}`})
    };
    return { activeNames, handleGetPlayUrl };
  },
});
</script>

<style lang="scss" scoped>
.Catalogue_page {
  margin: 10px;
  .lesson {
    text-indent: 10px;
    margin-bottom: 10px;
    height: 40px;
    font-size: 16px;
    font-weight: bolder;
    line-height: 40px;
    color: #383838;
  }
}
</style>